<!-- 混合统计 -->

<template>
  <div ref="chart" style="width: 800px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  name: "MixedChart",
  setup() {
    const chart = ref(null);
    let myChart = null;

    // Default data for the two series (approximated based on the image)
    const categories = [
      "一处室",
      "二处室",
      "三处室",
      "四处室",
      "五处室",
      "六处室",
      "七处室",
      "八处室",
    ];
    const barData = [250, 150, 300, 200, 150, 250, 200, 300]; // 数据目录数据 (blue bars)
    const lineData = [300, 200, 250, 300, 150, 200, 250, 200]; // 数据条数据 (yellow line)

    // Initialize the chart
    const initChart = () => {
      myChart = echarts.init(chart.value);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (params) => {
            let result = `${params[0].name}<br/>`;
            params.forEach((item) => {
              result += `${item.marker} ${item.seriesName}: ${item.value} 个<br/>`;
            });
            return result;
          },
        },
        legend: {
          data: ["数据目录数据", "数据条数据"],
          top: "0%",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "单位: 个",
            max: 300,
            interval: 50,
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#444",
              },
            },
          },
          {
            type: "value",
            name: "单位: 个",
            max: 300,
            interval: 50,
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "数据目录数据",
            type: "bar",
            data: barData,
            itemStyle: {
              color: "#87cefa",
            },
            barWidth: "40%",
          },
          {
            name: "数据条数据",
            type: "line",
            yAxisIndex: 1,
            data: lineData,
            itemStyle: {
              color: "#ff7f50",
            },
            lineStyle: {
              color: "#ff7f50",
            },
            symbol: "circle",
            symbolSize: 8,
          },
        ],
      };

      myChart.setOption(option);
    };

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

    return { chart };
  },
};
</script>

<style scoped>
/* Add any custom styles if needed */
</style>
